<template>
    <Tree>
        <template v-slot="{ data , index }">
            {{ data.name }} ----- {{ index }}
        </template>
        <template #foot>
             <div>我是下面吗</div>
        </template>
        <template #header>
            <div>我是上面吗</div>
        </template>  
        <!-- 动态插槽 -->
        <template #[styleSlot]>
            <div>作用域插槽 是在上面吗</div>
            <div> 动态插槽 </div>
        </template>
    </Tree>
    <button @click="handleClick">上到下</button>
</template>

<script setup lang="ts">
import Tree from './useSlot.vue'
import { ref } from 'vue';

let isStyleSlot = ref(false)
let styleSlot = ref('header')

const handleClick = () => {
     isStyleSlot.value ? styleSlot.value = 'header' :  styleSlot.value = 'foot'
     isStyleSlot.value = !isStyleSlot.value
}

</script>

<style lang='scss' scoped>

</style>
